<template>
	<view>
		<view class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tablist" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
			<view class="tab_content" v-show="TabCur==0">
				<form>
					<view class="cu-form-group margin-top">
						<view class="title">农场名称</view>
						<picker @change="PickerChange1" range-key="nc_mc" :value="sel1"  :range="ncpicker">
							<view class="picker">
								{{sel1>-1&&ncpicker[sel1].nc_mc?ncpicker[sel1].nc_mc:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">管理区名称</view>
						<picker @change="PickerChange2" range-key="glq_mc" :value="sel2"  :range="glqpicker">
							<view class="picker" v-if='glqpicker.length>0'>
								{{sel2>-1&&glqpicker[sel2].glq_mc?glqpicker[sel2].glq_mc:'请先选择农场名称'}}
							</view>
						</picker>
						<view v-if='glqpicker.length==0' class="deftxt">请先选择农场名称</view>
					</view>
					<view class="padding">
						<button class="cu-btn block bg-blue margin-tb-sm lg" @click="getCx">查询</button>
					</view>
				</form>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-blue"></text>折线图
					</view>
				</view>
				<view class="qiun-columns">
					<view class="qiun-charts">
						<canvas canvas-id="canvasLineA" id="canvasLineA" :class="showheight? 'charts':'charts500'" @touchstart="touchLineA"></canvas>
					</view>
				</view>
					 <scroll-view scroll-y scroll-x class="scroll-view-item_H" >
						 <view class="table" style="width: 150%;">
							 <view class="tr bg-w">
								 <view class="th">地块名称</view>
								 <view class="th">叶龄</view>
								 <view class="th">叶长(cm)</view>
								 <view class="th">分蘖数</view>
								 <view class="th" style="width: 52%;">有效光和面积(c㎡)</view>
								 <view class="th">叶色(饱和度)</view>
								 <view class="th">叶色(色度)</view>
							 </view>
							 <view v-for="(item,index) in listData" :key="index" class="tr" :class='index % 2 == 0? "bg-g":""'>
								  <view class="td">{{item.yl_dkmc}}</view>
								  <view class="td">{{item.yl_yl}}</view>
								  <view class="td">{{item.yl_yc}}</view>
								  <view class="td">{{item.yl_fns}}</view>
								  <view class="td" style="width: 52%;">{{item.yl_yxghmj}}</view>
								  <view class="td">{{item.yl_ysbhd}}</view>
								  <view class="td">{{item.yl_yssd}}</view>
							 </view>
						 </view>
					 </scroll-view>
					
			</view>
			<view class="tab_content" v-show="TabCur==1">
				<form>
					<view class="cu-form-group margin-top">
						<view class="title">农场名称</view>
						<picker @change="PickerChange4" range-key="nc_mc" :value="sel4"  :range="ncpicker">
							<view class="picker">
								{{sel4>-1&&ncpicker[sel4].nc_mc?ncpicker[sel4].nc_mc:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">管理区名称</view>
						<picker @change="PickerChange5" range-key="glq_mc" :value="sel5"  :range="glqpicker2">
							<view class="picker" v-if='glqpicker2.length>0'>
								{{sel5>-1&&glqpicker2[sel5].glq_mc?glqpicker2[sel5].glq_mc:'请先选择农场名称'}}
							</view>
						</picker>
						<view v-if='glqpicker2.length==0' class="deftxt">请先选择农场名称</view>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">地块名称</view>
						<picker @change="PickerChange6" range-key="dk_mc" :value="sel6" :range="dkpicker2">
							<view class="picker"  v-if='dkpicker2.length>0'>
								{{sel6>-1&&dkpicker2[sel6].dk_mc?dkpicker2[sel6].dk_mc:'请先选择管理区名称'}}
							</view>
						</picker>
						<view v-if='dkpicker2.length==0' class="deftxt">请先选择管理区名称</view>
					</view>
					<view class="padding">
						<button class="cu-btn block bg-blue margin-tb-sm lg" @click='dkyl'>查询</button>
					</view>
				</form>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-blue"></text>折线图
					</view>
				</view>
				<view class="qiun-columns">
					<view class="qiun-charts">
						<canvas canvas-id="canvasLineB" id="canvasLineB" :class="showheight?'charts':'charts500'" @touchstart="touchLineB"></canvas>
					</view>
				</view>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-titles text-blue"></text>叶龄数据
					</view>
				</view>
				<scroll-view scroll-y scroll-x class="scroll-view-item_H" >
					<view class="table" style="width: 200%;">
						 <view class="tr bg-w">
							 <view class="th">时间</view>
							 <view class="th">叶龄</view>
							 <view class="th">叶长(cm)</view>
							 <view class="th">分蘖数</view>
							 <view class="th" style="width: 52%;">有效光和面积(c㎡)</view>
							 <view class="th">叶色(饱和度)</view>
							 <view class="th">叶色(色度)</view>
							 <view class="th ">农艺措施</view>
							 <view class="th ">操作</view>
						 </view>
						 <view v-for="(item,index) in listData2" :key="index" class="tr" :class='index % 2 == 0? "bg-g":""'>
							  <view class="td">{{item.yl_djsj}}</view>
							  <view class="td">{{item.yl_yl}}</view>
							  <view class="td">{{item.yl_yc}}</view>
							  <view class="td" >{{item.yl_fns}}</view>
							  <view class="td" style="width: 52%;">{{item.yl_yxghmj}}</view>
							  <view class="td">{{item.yl_yssd}}</view>
							  <view class="td">{{item.yl_yssd}}</view>
							  <view class="td">{{item.yl_nycs}}</view>
							  <view class="td">
								  <button class="cu-btn round bg-cyan" @tap="openurl('ylechart',item.yl_bh)">查看</button>
							  </view>
						 </view>
					</view>
				</scroll-view>
			</view>
			<view class="tab_content" v-show="TabCur==2">
				<form>
					<view class="cu-form-group margin-top">
						<view class="title">农场名称</view>
						<picker @change="PickerChange7" range-key="nc_mc" :value="sel7"  :range="ncpicker">
							<view class="picker">
								{{sel7>-1&&ncpicker[sel7].nc_mc?ncpicker[sel7].nc_mc:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">管理区名称</view>
						<picker @change="PickerChange8" range-key="glq_mc" :value="sel8"  :range="glqpicker3">
							<view class="picker" v-if='glqpicker3.length>0'>
								{{sel8>-1&&glqpicker3[sel8].glq_mc?glqpicker3[sel8].glq_mc:'请先选择农场名称'}}
							</view>
						</picker>
						<view v-if='glqpicker3.length==0' class="deftxt">请先选择农场名称</view>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">地块名称</view>
						<picker @change="PickerChange9" range-key="dk_mc" :value="sel9" :range="dkpicker3">
							<view class="picker"  v-if='dkpicker3.length>0'>
								{{sel9>-1?dkpicker3[sel9].dk_mc:'请先选择管理区名称'}}
							</view>
						</picker>
						<view v-if='dkpicker3.length==0' class="deftxt">请先选择管理区名称</view>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">叶龄</view>
						<picker @change="PickerChange10" range-key="value" ind=4 :range="ylpicker">
							<view class="picker">
								{{sel10>-1?ylpicker[sel10].value:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="padding">
						<button class="cu-btn block bg-blue margin-tb-sm lg" @click='tpcx'>查询</button>
					</view>
				</form>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-titles text-blue"></text>叶龄图片
					</view>
				</view>
				<scroll-view scroll-y class="bg-white scroll-view-item_H2">
					<view class="bg-white padding">
						<view class="grid col-2 grid-square">
							<view class="bg-img textimg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(http://49.233.138.163:8080/ylzdjkfw/img/readimage?filename=' + item.tpmc + ')' }]">
								<view class="imgtext"><view>时间：{{item.tpsj}}</view><view> 叶龄：{{item.sp_yl}}</view></view></view>
									
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getncxxlist,getglqxxlist,getdkxxlist,getsblbcxbyid,gettpcx,getdkyl,getsydklist} from '../api/api.js'
	import uCharts from '../../common/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	var canvaLineB = null;
	export default {
		data() {
			let ylvalue=[];
			for(let i=0;i<=300;i++){
				ylvalue.push({value:i})
			}
			return {
				ncpicker:[],
				glqpicker:[],
				glqpicker2:[],
				dkpicker2:[],
				glqpicker3:[],
				dkpicker3:[],
				ylpicker:ylvalue,
				z:[],
				showheight:true,
				sel1: -1,
				sel2: -1,
				sel4: -1,
				sel5: -1,
				sel6: -1,
				sel7: -1,
				sel8: -1,
				sel9: -1,
				sel10: -1,
				TabCur: 0,
				scrollLeft: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				tablist: ['叶龄诊断','地块叶龄', '图片查看'],
				avatar:[],
				listData:[],
				listData2:[]
					
				};
			},
			onNavigationBarButtonTap:function(e){   //点击相机图标跳转
			           uni.navigateTo({
			           	url: 'ylzdImg'
			           });
			},
			onShow() {
					_self = this;
					this.cWidth = uni.upx2px(750);
					this.cHeight = uni.upx2px(500);
					getncxxlist(      //农场数据
						function(res){
							_self.ncpicker=res.data.returnData.ncxxlb;
						}
					)
				
	 
			},
			methods: {
				tabSelect(e) {
					this.TabCur = e.currentTarget.dataset.id;
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				},
				tpcx(){
					let parm ={jb:'',
					sp_ssnc:this.ncpicker[this.sel7]?this.ncpicker[this.sel7].nc_bh:'',
					sp_ssjd:this.glqpicker3[this.sel8]?this.glqpicker3[this.sel8].glq_bh:'',
					sp_ssdk:this.dkpicker3[this.sel9]?this.dkpicker3[this.sel9].dk_bh:'',
					sp_yl:this.ylpicker[this.sel10]?this.ylpicker[this.sel10].value:''
					};
					
					if(this.dkpicker3[this.sel9]&&this.dkpicker3[this.sel9].dk_mc){
						parm.jb='3'
					}else if(this.glqpicker3[this.sel8]&&this.glqpicker3[this.sel8].glq_bh){
						parm.jb='2'
					}else if(this.ncpicker[this.sel7]&&this.ncpicker[this.sel7].nc_bh){
						parm.jb='1'
					}else{
						parm.jb='1'
					}
					gettpcx(parm ,
					res=>{
						this.avatar=res.data.returnData.tpcx
					}
					)
				},
				dkyl(){
					if(this.dkpicker2[this.sel6]){
						let parm={yl_ssdk:this.dkpicker2[this.sel6].dk_bh,yl_yl:''};
						getdkyl(parm,
						res=>{
					
							this.listData2=res.data.returnData.yllb;
							this.getServerData2(res.data.returnData.yllb)
						}
						)
					}else{
						uni.showModal({
						    title: '提示',
						    content: '请先选择地块名称',
							showCancel:false
						});
					}
					
				},
				setselback(){
				
					this.sel2= -1;
					this.sel3= -1;
					this.glqpicker=[];
								
				},
				PickerChange1(e) {
					let _this=this
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel1 = e.detail.value;
					this.setselback()
				    let parm ={
						cx_ssnc:this.ncpicker[this.sel1].nc_bh
					} 
					getglqxxlist(      //农场数据
						parm,
						function(res){
						
							_this.glqpicker=res.data.returnData.glqxxlb;
						}
					)
				},
				PickerChange2(e) {
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel2 = e.detail.value
				},
				setselback2(){
				
					this.sel5= -1;
					this.sel6= -1;
					this.glqpicker2=[];
					this.dkpicker2=[];			
				},
				PickerChange4(e) {
					let _this=this
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel4 = e.detail.value;
					this.setselback2()
				    let parm ={
						cx_ssnc:this.ncpicker[this.sel4].nc_bh
					} 
					getglqxxlist(      //农场数据
						parm,
						function(res){
							_this.glqpicker2=res.data.returnData.glqxxlb;
						}
					)
				},
				PickerChange5(e) {
					let _this=this
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel5 = e.detail.value;
						
					let parm={cx_ssjd:this.glqpicker2[this.sel4].glq_bh}
					getdkxxlist(parm,
					function (res) {
						_this.dkpicker2=res.data.returnData.dkxxlb||[]
					}
					)
				},
				PickerChange6(e) {
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel6 = e.detail.value;
						
				},
				setselback3(){
				
					this.sel8= -1;
					this.sel9= -1;
					this.glqpicker3=[];
					this.dkpicker3=[];			
				},
				PickerChange7(e) {
					let _this=this
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel7 = e.detail.value;
					this.setselback3()
				    let parm ={
						cx_ssnc:this.ncpicker[this.sel7].nc_bh
					} 
					getglqxxlist(      //农场数据
						parm,
						function(res){
							_this.glqpicker3=res.data.returnData.glqxxlb;
						}
					)
				},
				PickerChange8(e) {
					let _this=this
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel8 = e.detail.value;
						
					let parm={cx_ssjd:this.glqpicker3[this.sel8].glq_bh}
					getdkxxlist(parm,
					function (res) {
						_this.dkpicker3=res.data.returnData.dkxxlb||[]
					}
					)
				},
				PickerChange9(e) {
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel9 = e.detail.value;
						
				},
				PickerChange10(e) {
					if(e.detail.value==-1 ) e.detail.value=0
					this.sel10 = e.detail.value;
						
				},
				openurl(url,data) {
					uni.navigateTo({
						url: url+'?parm='+data
					});
				},
				getCx(){  //点击查询
					let _this=this;
					if(this.glqpicker[this.sel2]){
						let parm={jd_bh:this.glqpicker[this.sel2].glq_bh};
						getsydklist(
							parm,
						    function(res){
							    
								_this.listData=res.data.returnData.yllb
								_this.getServerData(res.data.returnData.yllb);
							}
						)
					}else{
						uni.showToast({
						    title: '请选择管理区',
							duration: 2000,
							icon:'none'
						});
					}
					
				},
				getServerData(res){
					this.showheight = false
					let LineA = {
						categories: [],
						series: []
					};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					LineA.categories = res.map(item=>item.yl_djsj);
					LineA.series = [{
						"name": "叶龄",
						"data": res.map(item=>item.yl_yl)
					}];
					_self.showLineA("canvasLineA", LineA);
			
				},
				getServerData2(res) {
					this.showheight = false
					let LineB = {
						categories: [],
						series: []
					};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					LineB.categories = res.map(item=>item.yl_djsj);
					LineB.series = [{
						"name": "叶龄",
						"data": res.map(item=>item.yl_yl)
					}];
					_self.showLineB("canvasLineB", LineB);
					
			
				},
				showLineA(canvasId, chartData) {
					canvaLineA = new uCharts({
						$this:_self,
						canvasId: canvasId,
						type: 'line',
						fontSize:11,
						legend: {
							show: true,
							float:'center',
							lineHeight:20,
							itemGap:20
						},
						dataLabel:false,
						dataPointShape:true,
						background:'#FFFFFF',
						colors:['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d','#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
						'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'],
						pixelRatio:_self.pixelRatio,
						categories: chartData.categories,
						series: chartData.series,
						animation: true,
						xAxis: {
							type:'grid',
							gridColor:'#CCCCCC',
							gridType:'dash',
							dashLength:8
						},
						yAxis: {
							gridType:'dash',
							gridColor:'#CCCCCC',
							dashLength:8,
							splitNumber:5,
							
							format:(val)=>{return val.toFixed(0)}
						},
						width: _self.cWidth*_self.pixelRatio,
						height: _self.cHeight*_self.pixelRatio,
						extra: {
							line: {
								type: 'curve'
							}
						}
					});
				},
				showLineB(canvasId, chartData) {
					canvaLineB = new uCharts({
						$this:_self,
						canvasId: canvasId,
						type: 'line',
						fontSize:11,
						legend: {
							show: true,
							float:'center',
							lineHeight:20,
							itemGap:20
						},
						dataLabel:false,
						dataPointShape:true,
						background:'#FFFFFF',
						colors:['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d','#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
						'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'],
						pixelRatio:_self.pixelRatio,
						categories: chartData.categories,
						series: chartData.series,
						animation: true,
						xAxis: {
							type:'grid',
							gridColor:'#CCCCCC',
							gridType:'dash',
							dashLength:8
						},
						yAxis: {
							gridType:'dash',
							gridColor:'#CCCCCC',
							dashLength:8,
							splitNumber:5,
							
							format:(val)=>{return val.toFixed(0)}
						},
						width: _self.cWidth*_self.pixelRatio,
						height: _self.cHeight*_self.pixelRatio,
						extra: {
							line: {
								type: 'curve'
							}
						}
					});
				},
				touchLineA(e) {
					canvaLineA.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				},
				touchLineB(e) {
					canvaLineA.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			}
		}
</script>

<style>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css"; 
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 100%;
		/* height: 500rpx; */
		background-color: #FFFFFF;
	}
	.charts500{
		width: 100%;
		height: 500rpx; 
		background-color: #FFFFFF;
	}
	.charts {
		width: 100%;
		height: 50rpx; 
		background-color: #FFFFFF;
	}
    .td50 .td,.td50 .th{
		 width:50%;
		}
</style>
